<template>
  <div :class="['section', 'area_gift']">
    <div class="change_area" @click="change">
      {{areaData && areaData.length >= 1 ? areaData[nextIndex].name : ''}}
    </div>
    <div class="map" v-if="areaData[areaDataIndex]">
      <transition name="slide-bottom">
        <img :src="areaData[areaDataIndex].img" :key="areaData[areaDataIndex].code">
      </transition>
    </div>
    <div class="text" v-if="areaData[areaDataIndex]">
      <p class="surplus">剩余<em>{{areaData[areaDataIndex].surplus}}</em>套</p>
      <p class="gift">婚宴定制囍酒套装</p>
      <p class="unclaimed">待领取</p>
    </div>
    <div class="gift_data" v-if="areaData[areaDataIndex]">
      <router-link :class="['place', item.className]" :key="item.className"
           v-for="item in areaData[areaDataIndex].places"
           to="/index/gift/exchange" tag="div"
      >
        <p>已领取</p>
        <p><em>{{item.received}}</em>份</p>
      </router-link>
    </div>
    <div class="text_content">
      <div class="item" v-for="item in giftRules">
        <h4>{{item.title}}</h4>
        <p v-html="item.content"></p>
      </div>
    </div>
    <router-link to="/index/gift/latest_place" class="btn">
      <img src="../assets/images/button_bg.png">
      <p>找到离我最近的领取点</p>
    </router-link>
    <home></home>
  </div>
</template>

<script>
  import home from '@/components/home';

  export default {
    name: 'areaGift',
    data: function () {
      return {
        giftRulesPath: 'static/data/gift_rules.json',
        areaDataPath: 'static/data/area_data.json',
        giftRules: [],
        areaData: [],
        areaDataIndex: 0,
        nextIndex: 0
      }
    },
    components: {
      home
    },
    created: function () {
      axios.get(this.giftRulesPath).then((res) => {
        this.$set(this, 'giftRules', res.data.giftRules);
      }).catch((error) => {
        console.log(error);
      });
      axios.get(this.areaDataPath).then((res) => {
        this.$set(this, 'areaData', res.data.areaData);
        this.areaData.length > 1 ? this.$set(this, 'nextIndex', 1) : "";
      }).catch((error) => {
        console.log(error);
      });
    },
    methods: {
      change: function () {
        if (this.areaData.length > 1) {
          this.areaDataIndex + 1 < this.areaData.length
            ? this.areaDataIndex++
            : this.$set(this, 'areaDataIndex', 0)
          this.nextIndex + 1 < this.areaData.length
            ? this.nextIndex++
            : this.$set(this, 'nextIndex', 0)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .area_gift {
    .change_area {
      position: absolute;
      left: setRem(56px);
      top: setRem(36px);
      z-index: 1;
      background-color: #e7c598;
      color: #bf0c21;
      font-size: setRem(24px);
      padding: setRem(4px) setRem(8px);
      border-radius: setRem(8px);
    }

    .map {
      position: absolute;
      top: setRem(75px);
      left: 0;
      right: 0;
      height: setRem(345px);
      overflow: hidden;

      img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 100%;
        margin: auto;
      }
    }

    .text {
      position: absolute;
      top: setRem(340px);
      right: setRem(42px);
      text-align: right;
      font-size: setRem(24px);

      .surplus {
        em {
          font-size: setRem(45px);
        }
      }

      .gift {
        font-size: setRem(36px);
      }

      .unclaimed {

      }
    }

    .gift_data {
      .place {
        position: absolute;
        left: 50%;
        z-index: 1;
        width: setRem(64px);
        height: setRem(64px);
        border-radius: 55% 50% 80% 0 / 80% 50% 55% 0;
        background-color: #e7c598;
        opacity: 0;
        transform: scale(0) rotate(-45deg);
        box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.5);
        color: #bf0c21;
        font-size: setRem(16px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        animation: bubbling 240ms ease forwards;
        animation-delay: 1.3s;
        transform-origin: left bottom;

        p {
          text-overflow: ellipsis;

          &:first-child {
            transform: rotate(45deg) translateX(14%);
            margin-top: setRem(8px);
          }

          &:nth-child(2) {
            transform: rotate(45deg) translateX(-13%);
          }

          em {
            font-size: setRem(20px);
          }
        }
      }
      .place_sg {
        top: setRem(48px);
        margin-left: setRem(32px);
      }
      .place_yj {
        top: setRem(230px);
        margin-left: - setRem(80px);
      }
      .place_mm {
        top: setRem(242px);
        margin-left: - setRem(150px);
      }
      .place_hk {
        top: setRem(60px);
        margin-left: setRem(110px);
      }
      .place_sy {
        top: setRem(300px);
        margin-left: - setRem(92px);
      }
    }

    .text_content {
      bottom: setRem(110px);
      height: setRem(392px);
    }

    .btn {
      bottom: setRem(42px);
    }
  }

  @keyframes bubbling {
    20% {
      opacity: 0;
      transform: scale(0) rotate(-45deg);
    }
    90% {
      opacity: 1;
      transform: scale(1.1) rotate(-45deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(-45deg);
    }
  }
</style>
